<template>
 <el-collapse v-model="activeNames">
  <el-collapse-item class="edit-title" title="按钮样式设置" name="submit">
    <switch-button class="switch-button margin-top-10" :isClick="true">
      <template v-slot:default>
        <input-normal label="按钮文字" v-model="commonAttr.title" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
        <color-normal v-model="commonAttr.color" label="文字颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <div class="text-style-group">
          <el-radio-group v-model="textAlign" @change="onChangeAlign">
            <el-radio-button v-for="(style, index) in textStyles" :checked="style.checked" :label="style.attr" :key="index"><i :class="style.icon"></i></el-radio-button>
          </el-radio-group>
          <el-checkbox-button v-for="(style, index) in textStyles_" v-model="style.checked" :key="index" @change="onChangeAlign(style)"><i :class="style.icon"></i></el-checkbox-button>
        </div>
        <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
        <slider-normal v-model="commonAttr.letterSpacing" label="字距" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
        <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <input-normal label="按钮宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
        <input-normal label="按钮高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
      </template>
      <template v-slot:custom>
        <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :height="100" class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="commonAttr.bgUrl" @change="onChangeAttr"></input-normal>
        <input-normal label="图片宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
        <input-normal label="图片高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
      </template>
    </switch-button>
    <input-normal label="边距" placeholder="上 右 下 左" v-model="commonAttr.margin" @change="onChangeAttr"></input-normal>
    <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>

    <template v-if="siteStatus.isHighComponentConfiguration">
      <el-divider content-position="center">高级属性</el-divider>
      <el-divider content-position="center">选中样式设置</el-divider>
      <switch-normal v-model="commonAttr.isSelected" label="选中状态" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isGrey" label="灰色状态" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isDisabled" label="禁止点击状态" @change="onChangeAttr"></switch-normal>
      <div v-if="commonAttr.isDisabled || commonAttr.isSelected || commonAttr.isGrey">
        <div v-if="commonAttr.bgUrl && commonAttr.bgUrl.length > 0">
          <add-img-con :url="commonAttr.selectedBgUrl" comAttr="commonAttr" picAttr="selectedBgUrl" :height="100" class="margin-left-right-16"></add-img-con>
          <input-normal label="图片地址" v-model="commonAttr.selectedBgUrl" @change="onChangeAttr"></input-normal>
        </div>
        <div v-else>
          <color-normal v-model="commonAttr.selectedColor" label="文本颜色" format="rgb" @change="onChangeAttr"></color-normal>
          <color-normal v-model="commonAttr.selectedBgColor" label="按钮背景" format="rgb" @change="onChangeAttr"></color-normal>
        </div>
      </div>
    </template>
  </el-collapse-item>
</el-collapse>
</template>

<script>
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import SwitchButton from '@/views/components/switch-button.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

  import { mapActions, mapState } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'
  
  export default {
    mixins: [editUtils],
    props: {
      btnComponentData: Object,
      comAttr: String,
    },
    components: {
      SliderNormal,
      ColorNormal,
      DropdownNormal,
      InputNormal,
      TextareaNormal,
      SwitchNormal,
      AddImgCon,
      SwitchButton,
    },
    computed: {
      ...mapState({
      }),
      commonAttr(){
        return _.cloneDeep(this.btnComponentData.commonAttr)
      },
    },
    methods: {
      ...mapActions({
      }),
      onChangeAttr(){
        let params = {};
        let componentData = _.cloneDeep(this.btnComponentData)
        _.merge(componentData.commonAttr, this.commonAttr)
        if(this.comAttr && this.comAttr.length > 0){
          params[this.comAttr] = componentData;
        }else{
          params = componentData;
        }
        this.updateCurrentComponentData(params);
      },
    },
  }
</script>